<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="cw" uri="/widget-tags"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <cw:base/>
  <script type="text/javascript">
  function showImage(v,m,r) {
 		return "<img src=<s:url value='/'/>" + v + "></img>";
  }
  </script>
  </head>
  <body>
    <cw:window url="../query.jsp" id="see" width="600" height="300" title="查看明细"></cw:window>
    <ul>
		<li>
			<b>表格加载到的数据是一般的数据类型(整型、浮点数型、字符串型等)，通常还需要渲染再在表格中显示。</b>
		</li>
		<li>
			<b>表格列构件支持多种日期格式、字典、按钮、链接和自定义渲染。</b>
		</li>
		<li>
			<b>表格列构件可以用dataType属性(可选值[int,float,string,date,code]，默认值string)和format属性配合渲染列。
			设置dataType为date，则根据format渲染数据为相应日期格式；设置dataType为code，则根据format指定的字典代码读取字典显示值。</b>
		</li>
		<li>
			<b>表格列构件的renderData属性定义数据绑定字典，为javascript数据格式(如[['1','男'],['2','女']])。可以是通过JavaScript返回，也可以是EL表达式。</b>
		</li>
		<li>
			<b>表格列构件的renderer定义数据自定义渲染器，方法返回值是HTML文本。特殊renderer以#开头，#a渲染为超链接，#b渲染为按钮，后面跟实际调用的JS函数和参数。</b>
		</li>
		<li>
			<b>表格构件提供索引列标签indexColumn，显示记录行的索引号</b>
		</li>
	</ul>
	<br/>
	<br/>
	<ul>
		<li>
			表格列渲染(包含索引列、日期、按钮和图片)
		</li>
		<li>
			索引列通过indexColumn定义
		</li>
		<li>
			设置创建时间列的dataType为date，format为Y年m月d日
		</li>
		<li>
			设置操作列的renderer为"#b('超链接').see"
		</li>
		<li>
			设置图像列的renderer为函数，返回值是"&ltimg src=&lts:url value='/'/>" + v + ">&lt/img>"
				<cw:grid id="grid1" title="表格列渲染"
					url="../../../../sample/grid/gridpage.query.action"
					enablePage="false" exportable="false" selectMode="checkbox"
					urlParams="{id:0}"
					stripeRows="true" stripleColor="#c0c" autoLoad="true">
					<cw:indexColumn />
					<cw:gridColumn property="id" width="60" title="编号" />
					<cw:gridColumn property="name" width="120" title="姓名" />
					<cw:gridColumn property="email" width="30%" />
					<cw:gridColumn property="age" width="80" title="年龄" />
					<cw:gridColumn property="birthday" width="120" dataType="date" format="Y年m月d日" />
					<cw:gridColumn property="sex" width="80" rendererData="[[1,'男'],[2,'女']]" />
					<cw:gridColumn property="created" width="120" title="创建时间" dataType="date" format="Y年m月d日" />
			   		<!-- renderer渲染成超文本，#a('title').function，其中title为列的内容，function为实际调用的js函数 -->
			   		<cw:gridColumn property="id" width="100" title="操作" renderer="#b('超链接').see"/>
					<cw:gridColumn property="image" width="100" title="图像" renderer="function(v,m,r){return showImage(v,m,r);}"/>
				</cw:grid>
				<br/>
		</li>
	</ul>
  </body>
  <cw:theme></cw:theme>
 </html>